Skip to content

feat: theme engine — 11 presets, background patterns, share button#41

Open
jccidc wants to merge 9 commits into
nicobailon:mainfrom
jccidc:main
Open

feat: theme engine — 11 presets, background patterns, share button#41
jccidc wants to merge 9 commits into
nicobailon:mainfrom
jccidc:main

Conversation

@jccidc
Copy link
Copy Markdown

@jccidc jccidc commented Apr 11, 2026

Summary

  • 11 theme presets with full light/dark palettes and Google Fonts hot-reload
  • 16 background patterns (dot grid, hex, blueprint, isometric, parchment, etc.) — mode-aware
  • Share dropdown — Copy HTML and Download .html, strips interactive chrome and bakes the active theme
  • Mermaid auto re-render on theme/mode change with updated themeVariables
  • SKILL.md "Interactive Controls" section — teaches agents to include the toolbar on every page
  • Accessibility — WCAG 2.1 AA contrast guidance, focus-visible indicators, ARIA landmarks
  • Windows supportstart command added to browser-open instructions

Theme Presets

Theme presets table

Background Patterns

Background patterns table

Overview

Full overview

Files Changed

Files changed

Test Matrix

Test matrix

Implementation

  • theme-switcher-demo.html — canonical reference template (1,730 lines) with all presets, patterns, and share logic
  • css-patterns.md — +748 lines: theme switcher CSS, share button, background patterns, accessibility
  • SKILL.md — new Step 4 "Interactive Controls (Required)" with implementation checklist
  • share.sh — Claude Code skill paths added
  • README.md — updated with v0.7.0 features and screenshots

Test plan

  • Open theme-switcher-demo.html — verify all 11 presets cycle correctly
  • Toggle light/dark on each preset — fonts, colors, badges, table, cards all update
  • Switch background patterns — verify mode-aware rendering
  • Share > Copy HTML — verify clipboard contains clean HTML with no toolbar, baked theme
  • Share > Download .html — verify file opens standalone with correct theme
  • Resize viewport — verify responsive behavior, mobile TOC collapse

jccidc added 9 commits April 10, 2026 18:23
… print/PDF

Theme Switcher (11 presets):
- Teal Slate, Terracotta Sage, Editorial Rose, Deep Navy Gold, Amber Emerald
- Dracula, Nord, Catppuccin Mocha (warm mauve), Solarized Light, Rose Pine Dawn, GitHub Light
- Runtime CSS variable swaps + Google Fonts hot-reload
- Mermaid diagrams re-render with updated themeVariables on every switch
- Light/dark mode toggle with mode-aware color adjustments

Background Patterns (15 options):
- Dot Grid, Hex Grid (jimmycc.com SVG), Diagonal Lines, Cross Hatch
- Radial Glow, Dual Glow, Blueprint Grid, Noise Texture
- Honeycomb, Isometric, Topography, Parchment, Sketchbook, Graph Paper, Linen
- All mode-aware: stronger opacity in light mode, auto-reapply on theme change

Share Button:
- Copy HTML (strips chrome, bakes theme into inline styles)
- Download .html (same clean output as file)
- Save as PDF (bakes computed colors for print, toast with instructions)

Page Break System:
- Toolbar toggle enters page break mode
- Click between sections to place visual break markers
- Markers become break-before:page in print, hidden in output
- Click X to remove any marker

Print/PDF:
- @page margin:0 suppresses browser headers/footers
- print-color-adjust:exact on all elements preserves active theme
- Background colors baked as inline styles before print

Other:
- Windows start command in SKILL.md
- marketplace.json version sync (0.5.1 -> 0.6.3)
- share.sh checks Claude Code skill paths
- Accessibility: focus-visible, ARIA landmarks, contrast guidance
- Component borders upgraded to --border-bright for visibility
…nreliable

Page break markers, print preview overlay, and Save as PDF removed.
CSS print page breaks are a black box — break-before/break-inside
hints don't give enough control for presentation-quality output.
Use slide mode (/generate-slides) for shareable decks instead.

Share menu now: Copy HTML, Download .html (both strip chrome, bake theme).
Print CSS retained: break-inside:avoid on components, theme preservation.
SKILL.md had the entire "Step 4: Interactive Controls" section
(theme switcher, background patterns, share button requirement)
as an unstaged local change — agents loading from git got no
theme engine instructions. Now committed.

Also syncs version to 0.7.0 across plugin.json, marketplace.json,
package.json, and SKILL.md frontmatter. CHANGELOG print styles
bullet removed (feature was reverted in 30213a5), replaced with
Removed section noting the revert.
Rebrand fork as distinct skill from upstream nicobailon/visual-explainer.
- Skill name: visual-explainer -> my-visual-explainer (prevents collision)
- Repo: jccidc/visual-explainer -> jccidc/my-visual-explainer
- Inner plugin dir: plugins/visual-explainer/ -> plugins/my-visual-explainer/
- Author metadata: nicobailon -> jccidc (LICENSE attribution preserved)
- CHANGELOG historical entries left intact as release-history fact
Local permission allowlist should not be tracked — varies per dev machine.
If the initial `await mermaid.render()` in theme-switcher-demo.html rejects
on any parse error, the module script halts before the theme, background,
and share dropdown handlers are wired, leaving all three visibly broken.

Wrap the initial render, ThemeSwitcher.init(), and BG_PATTERNS[0].apply()
in try/catch so one failing piece can't take down the whole toolbar. Add
SKILL.md guidance so generated pages follow the same pattern. Bump to 0.7.1.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant